<template>
    <h3>日志列表</h3>
    <p>显示最近的日志列表，若需要查询更多日志的话请等待后续功能开发</p>
    <LogSelect @search="SearchInfo"/>
    <el-table :data="tableData" @cell-dblclick="$func.elTableCopyText">
        <el-table-column prop="id" label="日志编号" width="100" show-overflow-tooltip/>
        <el-table-column prop="did" label="设备ID" width="100" show-overflow-tooltip/>
        <el-table-column prop="args" label="所属应用"/>
        <el-table-column prop="file" label="所在文件" v-if="form.type == 'app'" show-overflow-tooltip/>
        <el-table-column prop="func" label="所在函数" v-if="form.type == 'runtime'" show-overflow-tooltip/>
        <el-table-column prop="line" label="所在行" v-if="form.type == 'app' || form.type == 'runtime'"/>
        <el-table-column prop="runtime" label="运行耗时（ns）" v-if="form.type == 'runtime'"/>
        <el-table-column prop="level" label="记录等级" v-if="form.type == 'app'"/>
        <el-table-column prop="content" label="所属详情" v-if="form.type != 'runtime' && form.type != 'quest'" show-overflow-tooltip/>
        <el-table-column prop="uri" label="请求网址" v-if="form.type == 'quest'" show-overflow-tooltip/>
        <el-table-column prop="param" label="请求参数" v-if="form.type == 'quest'" show-overflow-tooltip/>
        <el-table-column prop="header" label="请求头" v-if="form.type == 'quest'" show-overflow-tooltip/>
        <el-table-column prop="http_code" label="响应CODE" v-if="form.type == 'quest'"/>
        <el-table-column prop="body" label="返回值" v-if="form.type == 'quest'" show-overflow-tooltip/>
        <el-table-column prop="error" label="错误信息" v-if="form.type == 'quest'"/>
        <el-table-column prop="quest_sec" label="请求耗时(ns)" v-if="form.type == 'quest'"/>
        <!-- <el-table-column prop="client_ip" label="客户端IP" v-if="form.type == 'quest'"/>
        <el-table-column prop="uid" label="用户ID" v-if="form.type == 'quest'"/>
        <el-table-column prop="uuid" label="请求唯一值" v-if="form.type == 'quest'"/> -->
        <el-table-column label="记录时间" width="170">
            <template #default="scope">
                {{ $func.timesmarp(scope.row.id,3) }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button text @click="Infos(scope.row.id,scope.row.did)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination class="pages" background layout="prev, pager, next" :total="count" :page-size="pageLimit" v-model:current-page="page" @current-change="initData"/>
</template>
<script>
import LogSelect from './_log_select.vue'
export default {
    components:{
        LogSelect,// 日志搜索
    },
    data(){
        return {
            count:0,
            page:1,
            pageLimit:20,
            tableData: [],
            form:{type: 'pipe'},
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        // 详情查看
        Infos(id,did = 0){
            let routeData = this.$router.resolve({
                path: "/pages/index/error-info",
                query:{
                    id: id,
                    did: did
                },
            })
            window.open(routeData.href, '_blank');
        },
        // 数据搜索
        SearchInfo(res){
            this.form = res
            console.log("搜索内容：",res)
            this.count = 0
            this.page = 1
            this.initData()
        },
        // 页面初始化
        initData(){
            var that = this
            that.tableData = []
            that.$axios.get("api:log."+that.form.type+".list",{params:{
                args: that.form.args,
                did: that.form.did,
                level: that.form.level,
                page: that.page,
                limit: that.pageLimit,
            }})
            .then(res => {
                that.count = res.total
                that.tableData = res.data
            })
        },
    },
}
</script>